<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/jquery.min.js"></script>
    <script src="../static/echarts.min.js"></script>
    <title>Title</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: rgb(188, 227, 236);
            display: inline-block;
        }
    </style>
</head>
<body>
<br>
可视化展示
<br><br>
项目编号：<input id="project" type="text">
<br><br>
<button id="button">柱状图</button>
<br><br>
<div id="first"></div>


<script type="text/javascript">
    //3.初始化实例对象 echarts.init(dom容器)
    var project = document.getElementById("project");

    function set(data, Chart, theme) {
        Chart = echarts.init(document.getElementById(Chart));
        var option = {
            title: {
                text: ''
            },
            tooltip: {},
            legend: {
                data: ['物理量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [
                {
                    name: '物理量',
                    type: 'bar',
                    data: []
                }
            ]
        };
        Chart.setOption(option)
        Chart.setOption({
            title: {
                text: theme
            },
            xAxis: {
                data: data.site
            },
            series: [
                {
                    // 根据名字对应到相应的系列
                    name: theme,
                    data: data.data
                }
            ]
        });

    }


    $("#button").click(function () {
        var div = document.getElementById("first");
        while (div.hasChildNodes()) //当div下还存在子节点时 循环继续
        {
            div.removeChild(div.firstChild);
        }
        $.ajax({
            type: 'POST',
            url: "/look",
            data: {
                "project": project.value,
            },
            success: function (da) {

                console.log('---')
                dat = {}
                for (const i in da) {
                    var dataa = {};
                    console.log(i)
                    data = []
                    site = []
                    for (const t in da[i]) {
                        data.push(da[i][t])
                        site.push(t)
                        dataa["data"] = data
                        dataa["site"] = site
                    }
                    console.log(dataa)
                    dat[i] = dataa
                }
                console.log(dat)
                console.log('--------')

                var f = -1
                for (var i in dat) {
                    f = f + 1
                    console.log(dat[i])
                    var addname = "<div id=\"a" + f + "\" class='box'> </div>"
                    $('#first').append(addname)
                    var pppp = "a" + f

                    set(dat[i], pppp, i)
                }

            },
            error: function () {
                alert("上传失败");
            },
        });
    });
</script>
</body>
</html>